import * as React from 'react';
import { observer } from 'mobx-react'
import styles from './index.scss';
import { Carousel } from 'antd';

import error from '../../../../assets/imgs/test/error.png'
import waring from '../../../../assets/imgs/test/waring.png'
import { ILogType } from "../../../../type/firstType";
import ModalText from '../../../../components/ModalText'


interface IProps {
    borderBottom: string
    borderTop: string
    getLogInfo: ILogType[]
}

@observer
class Home extends React.Component<IProps> {

    constructor(props) {
        super(props);
    }


    public render() {
        const { borderBottom, borderTop, getLogInfo } = this.props
        return (
            <div className={styles.swiper} style={{ borderBottom: borderBottom }}>
                <div className={styles.title} style={{ borderTop: borderTop }}>
                    <span className={styles.spanWidth}><ModalText text='紧急状态' long={15} /></span>
                    <span className={styles.spanWidth}><ModalText text='预警时间' long={15} /></span>
                    <span className={styles.spanWidth}><ModalText text='预警频次' long={15} /></span>
                    <span className={styles.fixSpan}><ModalText text='预警内容' long={15} /></span>
                </div>
                <div className={styles.swiperC}>
                    {
                        getLogInfo.length > 0 &&
                        <Carousel autoplay={true} dots={false} vertical={true} slidesToShow={8} autoplaySpeed={2000}>
                            {
                                getLogInfo.map((item, index) => {
                                    return (
                                        <div className={index % 2 === 0 ? styles.list1 : styles.list}>
                                            <img src={item.warning === 'log-Critical' ? error : waring}
                                                className={styles.error} />
                                            <div className={styles.listC}>
                                                <span className={styles.spanWidth}><ModalText text={item.warning}
                                                    long={15} /></span>
                                                <span className={styles.spanWidth}><ModalText text={item.time}
                                                    long={15} /></span>
                                                <span className={styles.spanWidth}><ModalText text={String(item.trip)}
                                                    long={15} /></span>
                                                <span className={styles.fixSpan}><ModalText text={item.WarningReason}
                                                    long={20} /></span>
                                            </div>
                                        </div>
                                    )
                                })
                            }
                        </Carousel>
                    }
                </div>
            </div>
        );
    }
}

export default Home;
